<%@ page contentType="text/html;charset=UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<%@ include file="/WEB-INF/views/include/constrant.jsp"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <link href="${ctxStatic }/wx/mui/css/mui.min.css" rel="stylesheet" />
        <link rel="stylesheet" href="${ctxStatic }/wx/css/xiaketotal.css" />
		<script src="${ctxStatic }/zepto/zepto.js"></script>
		<script src="${ctxStatic }/wx/mui/js/mui.min.js"></script>
		<title>订单列表</title>
    </head>
    <body>
    <header class="mui-bar mui-bar-nav" style="background: #16c59b;" id="xiakeh1">
		     <span class="xkh-date" style="color:#fff;" id="city"></span>
		     <h1 class="mui-title" style="color: #fff;">霞客约车</h1>
	</header>
	   <div id="orders">
	   	<div class="orders-head">
	   		 <div class="mui-col-xs-4 order-pays" value="">
	   		 	<span class="orders-gc">全部</span>
	   		 </div>
	   		 <div class="mui-col-xs-4 order-pays" value="0">
	   		 	<span>已支付</span>
	   		 </div>
	   		 <div class="mui-col-xs-4 order-pays" value="1">
	   		 	<span>未支付</span>
	   		 </div>
	   	</div>
		<div class="mui-content">
             <div class="order-wrap">
             	 <div class="order-ii">
             	 	 <ul class="mui-table-view" id="ul1"></ul>
             	 </div>
             	 <div class="order-ii order-i-hide">
             	 	 <ul class="mui-table-view" id="ul2"></ul>
             	 </div>
             	 <div class="order-ii order-i-hide">
             	 	 <ul class="mui-table-view" id="ul3"></ul>
             	 </div>
             </div>
	    </div>
	   </div>
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item " data-url="${ctxWx}/pu/index"> <span
			class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首页</span>
		</a> <a class="mui-tab-item <c:if test='${pageStyle == indexPage}'>mui-active</c:if> " data-url="${ctxWx}/orders/orderList"> <span
			class="mui-icon mui-icon-list"> </span> <span class="mui-tab-label">订单</span>
		</a> <a class="mui-tab-item" data-url="${ctxWx}/my/myInfoPage"> <span
			class="mui-icon mui-icon-contact"></span> <span class="mui-tab-label">我的</span>
		</a>
	</nav>
		<script type="text/javascript">
	Zepto(function(){
		//页面加载完毕,查找全部订单
		mui.post('${ctxFront}/mobile/getOrderList',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
					orderstatus:""
				},function(d){
					if(d.code=='200'){
						appendData(d,"");
					}else{
						mui.alert(d.message)
					}
		}, 'json');
	    changes('.order-pays','.order-ii');
	    function changes(oa,ob){
	    	$(oa).on('click',function(e){
				$(this).children().css({'color':'#16C59B','border-bottom':'1px solid #16C59B'}).parent().siblings().children().css({'color':'#333','border-bottom':'none'})
			    var index=$(this).index();
			    $(ob).eq(index).show().siblings().hide();
			    var orderstatus =$(this).attr('value');
			    mui.post('${ctxFront}/mobile/getOrderList',{
					userid:'${sessionScope.front_user.id}',
					pageNo:1,
					pageSize:500,
					orderstatus:orderstatus
				},function(d){
					if(d.code=='200'){
						appendData(d,orderstatus);
					}else{
						mui.alert(d.message)
					}
				}, 'json');
			})
	    };
	})
	mui('.mui-table-view').on('tap','li',function(e){
		var url = this.getAttribute("id");
		mui.openWindow({
			url : url,
			id : "orderDetail.jsp",
			extras :{    //页面传值,打开了一个新的页面之后,传了一个值过去
				title:url
			},
			show:{
				autoShow:true,   //不延迟加载 
				aniShow :"slide-in-right",
				duration:100
			},
			waiting :{      //是否显示等待框
				autoShow :true,
				title: '正在加载...'
			}
	})
})
	function appendData(d,orderstatus){
			var sm = d.data.ordersList;
			var table = "";
			if (orderstatus=="") {
				table = document.getElementById("ul1");
			} else if(orderstatus=="0"){
				table = document.getElementById("ul2");
			}else{
				table = document.getElementById("ul3");
			}
			table.innerHTML = "";//清空数据
			for (var i=0;i<sm.length;i++) {
				var li = document.createElement("li");
				li.className = "mui-table-view-cell mui-media ";
				//得到订单id,用户显示详情
				li.id = "${ctxWx}/orders/orderDetail?orderid="+sm[i].orderid;
				var str = "";
				var orderType = "";
				var orderClass = "";
				var orderNameClass = "";
				//订单类型(2=按天包车,5=旅游包车,6=接送机包车,c=定制包车)
				if (sm[i].ordertype==2) {
					orderType = "按天包车";
					orderClass = "o-i-1";
					orderNameClass = "byday";
				} else if(sm[i].ordertype==5){
					orderType = "旅游包车";
					orderClass = "o-i-2";
					orderNameClass = "tour-chartered";
				} else if(sm[i].ordertype==6){
					orderType = "接送机包车";
					orderClass = "o-i-4";
					orderNameClass = "airport";
				}else if(sm[i].ordertype=='c'){
					orderType = "定制包车";
					orderClass = "o-i-3";
					orderNameClass = "custom";
				}else if(sm[i].ordertype== 9) {
					orderType = "行程顾问";
					orderClass = "o-i-5";
					orderNameClass = "trip-orders";
				}else{
					orderType = "AA拼车";
					orderClass = "o-i-5";
					orderNameClass = "trip-orders";
				}
				var orderStatus = "";
				var orderStatusClass = "";
				//订单状态,0=已支付,1=未支付,2=已取消,9=已作废
				if (sm[i].orderstatus==0) {
					orderStatus = "已支付";
					orderStatusClass = "order-state";
				} else if(sm[i].orderstatus==1){
					orderStatus = "未支付";
					orderStatusClass = "order-red";
				} else if(sm[i].orderstatus==2){
					orderStatus = "已取消";
					orderStatusClass = "order-gury";
				}else if(sm[i].orderstatus==9){
					orderStatus = "已作废";
					orderStatusClass = "order-gury";
				}
				//预定时间处理
				var createDate = sm[i].createDate.split(" ")[0];
				var dateStr = getLocalTime(sm[i].departdate);
				str += "<div class='order-lists'>";
				str += "<div class='order-il'>";
				str += "<div class='mui-col-xs-7 order-s-t'>";
				str += "<i class='order-ico "+orderClass+"'></i>";
				str += "<span class='"+orderNameClass+"'>"+orderType+"</span>";
				str += "</div>";
				str += "<div class='mui-col-xs-5 order-s-h'>";
				str += "<span>预定日期："+createDate+"</span>";
				str += "</div>";
				str += "</div>";
				str += "<div class='order-il'>";
				str += "<p>"+sm[i].ordername+"</p>";
				str += "</div>";
				str += "<div class='order-il'>";
				str += "<div class='mui-col-xs-8 order-s-t'>";
				str += "<span class='order-times'>出发日期："+dateStr+"</span>";
				str += "</div>";
				str += "<div class='mui-col-xs-4 order-s-h'>";
				str += "<span class='order-pay'><font>￥</font>"+parseFloat(sm[i].dueamount)+"</span>";
				str += "</div>";
				str += "</div>";
				str += "<div class='order-il'>";
				str += "<div class='mui-col-xs-7 order-s-t'>";
				str += "<span class='order-number'>订单编号："+sm[i].orderid+"</span>";
				str += "</div>";
				str += "<div class='mui-col-xs-5 order-s-h'>";
				str += "<span class='"+orderStatusClass+"'>"+orderStatus+"</span>";
				str += "</div>";
				str += "</div>";
				str += "</div>";
				
				li.innerHTML = str;
	            table.appendChild(li);
			}
		
		}
		//时间戳转时间格式
	function getLocalTime(nS) {  
		var date = new Date();  
	    date.setTime(nS);  
	    var y = date.getFullYear();      
	    var m = date.getMonth() + 1;      
	    m = m < 10 ? ('0' + m) : m;      
	    var d = date.getDate();      
	    d = d < 10 ? ('0' + d) : d;      
	    var h = date.getHours();    
	    h = h < 10 ? ('0' + h) : h;    
	    var minute = date.getMinutes();    
	    var second = date.getSeconds();    
	    minute = minute < 10 ? ('0' + minute) : minute;      
	    second = second < 10 ? ('0' + second) : second;     
	    return y + '-' + m + '-' + d+' '+h+':'+minute+':'+second;      
	};
	//底部选项卡跳转
    $('.mui-tab-item').on('tap', function() {
		if ($(this).attr('data-url') != '') {
			window.location.href = $(this).attr('data-url');
		}
	}); 
		</script>
	</body>
</html>
